import styled from 'styled-components'

const RecommendedStyled = styled.div`
  width : 100%;
  height : .7rem;
  border-bottom : .01rem solid #ebe5e5;
  padding: 0 .15rem 0 0;
  display : flex;
  align-items: center;
  /* margin-right: .15rem; */
  /* overflow: hidden; */
  img.bossImg{
    background-color: #f4f4f4; 
    width : .5rem;
    height : .5rem; 
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow : 0;
    margin-right: .1rem;
    
  }
  div.recommendedInfoWrap{
    flex-grow : 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* overflow:hidden; */
    >div{
      height: .2rem;
    }
    div.one{
      color: #646464;
      font-size : .13rem;
      
    }
    div.two{
      display: flex;
      align-items: center;
      img.djimg{
        height : .15rem;
        width : 1.1rem;
        margin-right: .15rem;

      }
      p{
        margin-left: .15rem;
        color : #FFB538;
        font-size: .11rem;
      }
    }
    div.three{
      p{
        color : #c0c0c0;
        font-size: .11rem;
      }
    }
  }
`

export {RecommendedStyled}